<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
	 xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
	 xmlns:mf="http://typo3.org/ns/MiniFranske/FsMediaGallery/ViewHelpers">

	<!--
	 Displays assets of an album in FlatList view
	 Theme: Bootstrap3
	-->
	<f:section name="AssetsList">
	<style>
      /*div.album>h2{padding: 30px 0 20px 0;}
      div.return{margin: 10px;}
      div.return>a.btn.btn-info {text-decoration: none;color: #fff;}*/
      .slider-relative .slide small{text-indent:35px}

    </style>
    <script>
    	//change title 
    	var tit = $("title").html();
    	var newt = "{mediaAlbum.title}"+" "+ tit.substring(tit.indexOf("-"));
    	$("title").html(newt);
    </script>
		<div class="album">
                        <f:if condition="{settings.album.displayTitle}">
                            <h3>{mediaAlbum.title}</h3>
                        </f:if>
			<div class="description"><f:format.html>{mediaAlbum.webdescription}</f:format.html></div>
			<mf:widget.paginate objects="{mediaAlbum.assets}" as="paginatedAssets" widgetId="assets" itemsBefore="before" itemsAfter="after" configuration="{itemsPerPage:settings.album.pagination.itemsPerPage, insertAbove:settings.album.pagination.insertAbove, insertBelow:settings.album.pagination.insertBelow, maximumNumberOfLinks:settings.album.pagination.maximumNumberOfLinks, pagesBefore:settings.album.pagination.pagesBefore, pagesAfter:settings.album.pagination.pagesAfter}">
				<f:if condition="{settings.album.lightbox.enable}">
					<f:if condition="{before}">
						<f:for each="{before}" as="mediaAsset">
							<a href="{f:uri.image(image:mediaAsset, width:'{settings.album.lightbox.asset.width}{settings.album.lightbox.asset.resizeMode}', height:'{settings.album.lightbox.asset.height}{settings.album.lightbox.asset.resizeMode}')}" rel="{settings.album.lightbox.relPrefix}{mediaAlbum.uid}" class="{settings.album.lightbox.styleClass} {settings.album.lightbox.styleClass}-{mediaAlbum.uid}" title="{mf:fileTitle(file:mediaAsset)} - {mediaAlbum.title}"></a>
						</f:for>
					</f:if>
				</f:if>
				<f:if condition="{paginatedAssets}">
					<f:then>
						<!-- <div class="container-fluid">
							<div class="row"> -->
						<div id="raxus-uid-{mediaAlbum.uid}" class="raxus-slider" data-autoplay="10000" data-arrows="show" data-fullscreen="show" data-dots="show" data-keypress="true" data-thumbnail="bottom">
		                    <ul class="slider-relative">
								<f:for each="{paginatedAssets}" as="mediaAsset" iteration="i">
									 <li class="slide">
									 	<f:image image="{mediaAsset}" alt="{alt}" title="{f:if(condition:title, then:title, else:'{mf:fileTitle(file:mediaAsset)}')}" style="max-width: 1082px" />
                                        <span class="text">
                                            <f:if condition="{mediaAsset.properties.title}">
                                                <strong>{mediaAsset.properties.title}</strong>
                                            </f:if>
                                            <f:if condition="{mediaAsset.properties.description}">
                                                <small>{mediaAsset.properties.description}</small>
                                            </f:if>
                                        </span>
									</li>
								</f:for>
							</ul>
						</div>
						<script type="text/javascript">
                            var winwidth=$(window).width();
                            if(winwidth>768){
                                var height=$(window).height();
                                $(".raxus-slider").css({'height':height,'position':'unset'})
                            }
                        </script>
					</f:then>
					<f:else>
						<div class="alert alert-info">
							<p><f:translate key="no_assets_found">No assets found.</f:translate></p>
						</div>
					</f:else>
				</f:if>
				<f:if condition="{settings.album.lightbox.enable}">
					<f:if condition="{after}">
						<f:for each="{after}" as="mediaAsset">
							<a href="{f:uri.image(image:mediaAsset, width:'{settings.album.lightbox.asset.width}{settings.album.lightbox.asset.resizeMode}', height:'{settings.album.lightbox.asset.height}{settings.album.lightbox.asset.resizeMode}')}" rel="{settings.album.lightbox.relPrefix}{mediaAlbum.uid}" class="{settings.album.lightbox.styleClass} {settings.album.lightbox.styleClass}-{mediaAlbum.uid}" title="{mf:fileTitle(file:mediaAsset)} - {mediaAlbum.title}"></a>
						</f:for>
					</f:if>
				</f:if>
			</mf:widget.paginate>
			<!-- <f:if condition="{showBackLink}">
				<div class="navigation">
					<f:link.action class="btn btn-default" controller="MediaAlbum"><f:translate key="back_to_albums_list">Back to album list</f:translate></f:link.action>
				</div>
			</f:if> -->
		</div>
		<f:if condition="{settings.album.lightbox.enable}">
			<f:render partial="MediaAlbum/Lightbox" section="Lightbox" arguments="{mediaAlbum:mediaAlbum}" />
		</f:if>
	</f:section>

</div>
